<template>
  <v-touch class="wrapper" v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight">
    <div class="left-top-title">
      <div class="left-line animated fadeIn"></div>
      <img class="animated fadeInLeft" src="static/locationAdvantages/title-en.png" alt="">
      <h1 class="animated fadeInLeft"><img src="static/locationAdvantages/title-zh.png" alt=""></h1>
    </div>
    <img class="background" src="static/locationAdvantages/background.png" alt="">
    <div class="location-wrapper">
      <img class="point" src="static/locationAdvantages/point.png" alt="">
      <img src="static/locationAdvantages/address.png" alt="">
      <div class="ripple"></div>
    </div>
    <left-menu></left-menu>
  </v-touch>
</template>

<script>
import leftMenu from '@/components/LeftMenu';

export default {
  components: {
    leftMenu,
  },
  methods: {
    onSwipeLeft() {
      this.$router.push('/functionLayout');
    },
    onSwipeRight() {
      this.$router.push('/');
    },
  },
};
</script>

<style lang="stylus" scoped>
@keyframes topDown {
  from {
    transform translateY(-10px)
  }
  to {
    transform translateY(0px)
  }
}
@keyframes diffusion {
  from {
    transform scale(0)
    opacity 1
  }
  to {
    transform scale(1.5)
    opacity 0
  }
}

  .location-wrapper
    position absolute
    top 470px
    right 740px
    .ripple
      position absolute
      top 37px
      left 8px
      border 2px solid red
      width 20px
      height 20px
      border-radius 50%
      animation diffusion 2s ease-out infinite
    .point
      animation topDown 1s ease-in-out infinite alternate
</style>
